<template>
    <el-header height="100px" style="width: 100%;">
      <div class="page-top">
        <span>
          <i class="el-icon-time">Open-Hours:10am to 7pm</i>
          <i class="el-icon-message">Contact Us:123456@gmail.com</i>
        </span>
        <span>
          <i class="el-icon-s-goods"></i>
          <i class="el-icon-s-promotion"></i>
          <i class="el-icon-s-flag"></i>
        </span>
      </div>
      <div class="page-tab">
        <img class="page-tab-logo" src="../assets/LowBay_LOGO.png" alt="">
        <div style="display: flex;justify-content: space-between">
          <el-menu
            class="page-tab-bar"
            mode="horizontal"
            @select="handleSelect"
            background-color=transparent
            text-color="#000"
            active-text-color="#ffd04b">
            <el-menu-item index="2">商品广场</el-menu-item>
            <el-menu-item v-if="type_id===2" index="3">供货广场</el-menu-item>
            <el-menu-item v-if="type_id!==3" index="4">网店管理</el-menu-item>
            <el-menu-item index="5">订单管理</el-menu-item>
            <el-menu-item v-if="type_id!==1" index="6">购物车</el-menu-item>
            <el-menu-item index="7">个人中心</el-menu-item>
            <el-menu-item index="8">关于我们</el-menu-item>
          </el-menu>
          <div class="login-container" v-if="!is_login">
            <span class="login" @click="$router.push('/login')" >登录/注册</span>
          </div>
        </div>
      </div>

    </el-header>

</template>

<style scoped>
.el-header{
  background-color: white;
  padding: 0;
  border-bottom: solid 1px #e6e6e6;
  top: 0;
}
.page-top{
  background-image: url("../assets/page-top.png");
  height:30%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.page-top span{
  color:white;
  font-size: 14px;
}
.page-top span i{
  margin: 5px;
}
.page-tab{
  background-color: #ffffff;
  align-content: center;
  display: flex;
  width:100%;
  height:70%;
  justify-content: space-between;

}
.page-tab-logo{
  height:50px;
  position: relative;
  top:50%;
  transform: translateY(-50%);
  padding-left: 30px;
}
.el-menu{
  border: 0;
}
.el-menu-item{
  height:100%;
  line-height: 70px;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-size: 18px;
}
.login-container{
  height: 100%;
  width:150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login{
  height: 30px;
  line-height: 30px;
  padding: 8px;
  border: 3px white solid;
  border-radius: 5px;
  color: white;
  background: #333333;
  cursor: pointer;
  transition: all 100ms;
}
.login:hover{
  transform: translate(-1px,-1px);
  box-shadow: 1px 1px 1px 1px rgb(204,204,204);
}

</style>

<script>
export default {
  name: "navbar",
  data(){
    return{
      is_login:this.$store.state.user.is_login,
      type_id:this.$store.state.user.type_id,
      router:[    //存放路由信息
        '/customer',
        '/seller_index',
        '/manage',
        '/order',
        '/cart',
        '/user_center',
        '/home',
      ]
    }
  },
  methods:{
    handleSelect(key) {
      console.log(key);
      this.$router.push(this.router[key-2]);
    }
  },
  mounted() {
    if (document.cookie.length!==0){
      this.is_login=true;
    }
    // console.log(document.cookie.length);
  }

}
</script>


